<template>
  <div class="city">
    <!-- 头部导航 -->
    <van-nav-bar
      title="城市列表"
      :border="false"
      right-text="返回"
      @click-right="onClickRight"
       @click-left="onClickLeft"
    ><template #left>
        <van-icon name="search" size="18" />
      </template>
    
    </van-nav-bar>
    <!-- 热门城市 -->
   <div class="hot">
      <van-row type="flex">
        <van-col
          ><span>当前选择城市：{{ currentCity }}</span></van-col
        >
      </van-row>
      <van-divider content-position="left">热门城市</van-divider>
      <div class="city_list">
        <div
          v-for="item in hostCity"
          :key="item.id"
          @click="changeCity(item.id, item.nm)"
        >
          {{ item.nm }}
        </div>
      </div>
    </div>
    <!-- 地址栏 -->
    
    <div class="dress" >
      <van-index-bar
        @select="select($event)"
        :index-list="indexList"
        :sticky-offset-top="0"
      >
        <div class="dcity" v-for="data in cityList" :key="data.type">
          <van-index-anchor :index="data.type" />
          <van-cell
            :title="item.nm"
            v-for="item in data.List"
            :key="item.id"
            @click="changeCity(item.id, item.nm)"
          />
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import {mapMutations } from "vuex";
import { Toast } from "vant";
import axios from "axios";
export default {
  name: "VueMovieCitys",
  data() {
    return {
      show: true,
      cityList: [],
      indexList: [],
      hostCity: [
        
       {
          id: 1,
          nm: "北京",
        },
        {
          id: 10,
          nm: "上海",
        },
        {
          id: 20,
          nm: "广州",
        },
        {
          id: 30,
          nm: "深圳",
        },
        {
          id: 40,
          nm: "天津",
        },
        {
          id: 42,
          nm: "西安",
        },
        {
          id: 45,
          nm: "杭州",
        },
        {
          id: 50,
          nm: "杭州",
        },
        {
          id: 55,
          nm: "南京",
        },
        {
          id: 57,
          nm: "武汉",
        },
        {
          id: 59,
          nm: "成都",
        },
      ],
      currentCity: this.$store.state.cityNm,
    };
  },
  mounted() {
    // 优先加载本地的缓存数据 没有再请求数据
    this.isCityList();
    scroll(0, 0);
  },
  methods: {
     ...mapMutations(['CHANG']),
    // 判断是否有本地城市数据
    isCityList() {
      const citys = localStorage.getItem("citys");
      if (citys == undefined || citys == null) {
        axios.get("https://apis.netstart.cn/maoyan/cities.json").then((res) => {
          const cityList = this.renderList(res.data.cts);
          const arr = cityList.map((item) => {
            return item.type;
          });
          if (res.status == 200) {
            this.indexList = arr;
            this.cityList = cityList;
            (this.show = false),
              localStorage.setItem("citys", JSON.stringify(this.cityList));
          }
        });
      } else {
        const cityList = JSON.parse(citys);
        const arr = cityList.map((item) => {
          return item.type;
        });
        this.show = false;
        this.indexList = arr;
        this.cityList = cityList;
      }
    },
    // 整理数据
    renderList(list) {
      // 大写分类
      const cityList = [];
      const capitalList = [];
      for (let i = 65; i < 91; i++) {
        capitalList.push(String.fromCharCode(i));
      }
      capitalList.forEach((itemUp) => {
        // 内容分类 过滤等于大写的item项 返回新数组
        const itemList = list.filter(
          (item) => item.py.substring(0, 1).toUpperCase() === itemUp
        );
        // 去掉数组为空的值
        if (itemList.length > 0) {
          cityList.push({
            type: itemUp,
            List: itemList,
          });
        }
      });
      return cityList;
    },

    // 切换城市
    changeCity(id, nm) {
      const city = { id, nm };
      this.$store.commit("CHANGECITY", city);
        this.$store.commit("CHANG", city);
      this.$router.push("/Video");
      Toast("已切换到" + city.nm);
    //  this.CHANG()
    },
    // 返回
    onClickRight() {
      this.$router.go("-1");
    },
     onClickLeft() {
     Toast("未开放");
    },
    select(e) {
      Toast(e);
    },
  },
};
</script>


<style lang="less" scoped>

.city {
 
  padding-top: 136px;
  .van-nav-bar {
    position: absolute;
    top: 0px;
    z-index: 99;
    width: 100%;
    background-color: #f8f9f9;
  }

  .hot {
    position: absolute;
    top: 46px;
    z-index: 99;
    height: 90px;
    width: 100%;
    width: 100%;
    background-color: #f8f9f9;
   .van-divider.van-divider--hairline.van-divider--content-left{
  margin-top: 0;
   }
    .van-row {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      margin: 5px 15px;
      .van-col {
        text-align: left;
      }
      .van-col:nth-child(2) {
        text-align: right;
        color: #666;
      }
    }
    .city_list {
      display: flex;
padding-top: 10px;
      flex-wrap: wrap;
      justify-content: flex-start;
      div {
        width: 90px;
        height: 30px;
        display: block;
        text-align: center;
        line-height: 30px;
        margin: 0 18.5px 5px 18.5px;
        background-color: #fafafa;
        color: black;
        border: 1px solid #ddd;
        border-radius: 8px;
      }
    }
  }
   .dress {
    
   position: absolute;
    top: 300px;
    z-index: 99;
    width: 100%;
    background-color: #f8f9f9;
    .dcity {
      padding: 0px 1px 0px 4px;
    }
  }
}
</style>